<template>
	<div class="container">
		<van-nav-bar
			fixed
			title="注册账号"
			@click-left="$router.back()"
			left-arrow
		/>

    <div class="logo-txt">
      欢迎注册
    </div>
		<van-form @submit="onSubmit" label-width="70px">
			<van-field
				v-model="mobile"
				name="mobile"
				label="用户名"
				placeholder="请输入手机号"
        left-icon="manager"
				:rules="[{ required: true, message: '请填写用户名' },
				{pattern:/^1[3-9]\d{9}$/,message:'请输入手机号'}]"
			/>
			<van-field
				v-model="password"
				type="password"
				name="password"
				label="密码"
				placeholder="密码"
        left-icon="lock"
				:rules="[{ required: true, message: '请填写密码' },
				{pattern:/^\w{6,12}$/,message:'请填写密码6~12位的密码'}]"
			/>
      <van-field
				v-model="password1"
				type="password"
				name="password1"
				label="确认密码"
				placeholder="确认密码"
        left-icon="lock"
				:rules="[{ required: true, message: '请填写密码' },
				{pattern:/^\w{6,12}$/,message:'请填写密码6~12位的密码'}]"
			/>
			<div style="margin: 16px">
				<van-button square  block type="info" native-type="submit"
					>立即注册</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
import { register } from "@/api/user"
export default {
	name:'RegisterPage',
	data() {
		return {
			mobile: '',
			password: '',
			password1:''
		}
	},
	methods: {
	async onSubmit(values) {
			console.log('submit', values)
			//判定两次密码是否一致，如果不一致就return
			if (values.password !==values.password1) {
			return	this.$toast('两次密码不一致')
			}
			// 调用register的请求
			const res=await register(values)
			console.log(res)
			//判定errno===0注册成功跳转页面errno===1000账号存在
			if (res.data.errno===0) {
        this.$toast('注册成功')
				this.$router.push('/login')		
			}else if (res.data.errno===1000) {
				this.$toast('账号已存在')
			}
		},
	},
}
</script>

<style scoped>
.logo-txt{
  text-align:center;
  font-size: 60px;
  margin: 60px auto;
  color: #1989fa;
}
</style>
